<!DOCTYPE html> 
<html>
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>美味即食地图</title> 
    <style type="text/css"> 
        html{height:100%} 
        body{height:100%;margin:0px;padding:0px} 
        #container{height:100%} 
    </style> 
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=2wAlZaKbhYUD3v3muQNGc1fGy6CNpeKv">
    </script>
</head> 
  
<body> 
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(114.02301, 22.648283);
        // 创建点坐标 
        map.centerAndZoom(point, 18);
        // 初始化地图，设置中心点坐标和地图级别 
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            map.addControl(cityCtrl);
            var geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
                else {
                    return "加载失败"
                }        
            },{enableHighAccuracy: true})
    </script> 
</body> 
</html>